<template>
  <div style="margin-top:20px">
    <!-- ----------------------------------S7_300------------------------------------------->
    <el-table border ref="multipleTable" height="250" :data="rule_map" size='mini'>
      <template slot="empty">
        <el-empty :description="$t('暂无数据')"></el-empty>
      </template>
      <el-table-column prop="rule_id" align='center' :label="$t('规则ID')" width="80" />
      <el-table-column prop="proto" align='center' :formatter="protoValue" width="120" :label="$t('协议名称')">
        <template slot-scope="scope">
          {{ rule[scope.row.proto] }}
        </template>
      </el-table-column>
      <el-table-column prop="action" align='center' :formatter="matchOptionFormatter" width="80" :label="$t('动作')" />
      <el-table-column prop="func" align='center' :formatter="funcFormatter" width="140" :label="$t('功能码')" />
      <el-table-column prop="rows" align='center' :label="$t('其他配置')">
        <template slot-scope="scope">
          <tooltip :html="rowsTooltip(scope.row, true)" :content="rowsTooltip(scope.row, false)" class="wid190" :refName="scope.row.proto"></tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="accept_range" align='center' :formatter="acceptRangeFormatter" width="100" :label="$t('匹配范围')" />
      <el-table-column align="center" :label="$t('操作')" width="160" fixed='right'>
        <template slot-scope="scope">
          <el-button type="success" plain @click="editRule(scope.row)" size='mini'>{{$t('编辑')}}</el-button>
          <el-button type="danger" plain @click="deleteRule(scope.row)" size='mini'>{{$t('删除')}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- ----------------------------------S7_300_connect------------------------------------------->
    <el-table border ref="multipleTable" height="250" :data="rule_map_connect" size='mini' style="margin-top:20px;">
      <template slot="empty">
        <el-empty :description="$t('暂无数据')"></el-empty>
      </template>
      <el-table-column prop="rule_id" align='center' :label="$t('规则ID')" width="80" />
      <el-table-column prop="operate_type" align='center' width="120" :label="$t('类型')">
        <template slot-scope="scope">
          {{$t(operateTypeList[scope.row.operate_type])}}
        </template>
      </el-table-column>
      <el-table-column prop="proto" align='center' :formatter="protoValue" width="120" :label="$t('协议名称')">
        <template slot-scope="scope">
          {{ rule[scope.row.proto] }}
        </template>
      </el-table-column>
      <el-table-column prop="action" align='center' :formatter="matchOptionFormatter" width="80" :label="$t('动作')" />
      <el-table-column prop="relate_write_register_interval" align='center' width="120" :label="$t('写寄存器区间')">
        <template slot-scope="scope">
          {{$t(intervalList[scope.row.relate_write_register_interval])}}
        </template>
      </el-table-column>
      <el-table-column prop="write_db_num" align='center' width="100" :label="$t('写DB值')" />
      <el-table-column prop="write_register_address_range" align='center' width="120" :formatter="writeRegisterFormatter" :label="$t('写寄存器地址')" />
      <el-table-column prop="relate_read_register_interval" align='center' width="120" :label="$t('读寄存器区间')">
        <template slot-scope="scope">
          {{$t(intervalList[scope.row.relate_read_register_interval])}}
        </template>
      </el-table-column>
      <el-table-column prop="read_db_num" align='center' width="100" :label="$t('读DB值')" />
      <el-table-column prop="read_register_address_range" align='center' width="120" :formatter="ReadRegisterFormatter" :label="$t('读寄存器地址')" />
      <el-table-column prop="read_register_value_type" align='center' width="120" :label="$t('读寄存器值类型')">
        <template slot-scope="scope">
          {{$t(valueTypeReList[scope.row.read_register_value_type])}}
        </template>
      </el-table-column>
      <el-table-column prop="read_register_value_range" align='center' width="120" :formatter="readRegisterValueRangeFormatter" :label="$t('读寄存器值范围')" />
      <el-table-column align="center" :label="$t('操作')" width="160" fixed='right'>
        <template slot-scope="scope">
          <el-button type="success" plain @click="editRule(scope.row)" size='mini' :class="'edit' +(scope.$index+1)">{{$t('编辑')}}</el-button>
          <el-button type="danger" plain @click="deleteRule(scope.row)" size='mini' :class="'del' +(scope.$index+1)">{{$t('删除')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import ruleArray from '../../ruleArray'
export default {
  name: 'S7300Table',
  props: {
    ruleMap: {
      type: Array,
      default () {
        return []
      }
    }
  },
  watch: {
    ruleMap: {
      handler (newValue, oldValue) {
        this.rule_map = []
        this.rule_map_connect = []
        newValue.forEach(val => {
          if (val.proto === 's7_300') {
            this.rule_map.push(val)
          } else if (val.proto === 's7_300_connect') {
            this.rule_map_connect.push(val)
          }
        })
      },
      deep: true // 深度监听
    }
  },
  data () {
    return {
      rule: ruleArray.ruleShow,
      rule_map: [],
      rule_map_connect: [],
      funcList: ruleArray.code,
      intervalList: ruleArray.intervalList,
      valueTypeReList: ruleArray.valueTypeReList,
      valueTypeList: ruleArray.valueTypeList,
      rangeList: ruleArray.rangeList,
      actionList: { 'accept': '允许', 'alert': '告警' },
      acceptRangeList: { 'all': '所有', 'single': '单个' },
      showOther: ['0x04', '0x05'],
      showPositionList: ['I', 'Q', 'M', 'DB', 'DI'],
      operateTypeList: {
        0: '深度过滤',
        1: '关联操作'
      }
    }
  },
  mounted () {
    this.rule_map = []
    this.rule_map_connect = []
    this.ruleMap.forEach(val => {
      if (val.proto === 's7_300') {
        this.rule_map.push(val)
      } else if (val.proto === 's7_300_connect') {
        this.rule_map_connect.push(val)
      }
    })
  },
  methods: {
    // 删除规则
    deleteRule (row) {
      this.$emit('delRuleMap', row)
    },
    // 编辑规则
    editRule (row) {
      this.$emit('largeConfig', row)
    },
    // 协议名称显示
    protoValue (data) {
      return this.rule[data.proto]
    },
    // 动作格式化
    matchOptionFormatter (data) {
      return this.$t(this.actionList[data.action])
    },
    // s7300功能码格式化
    funcFormatter (data) {
      return this.$t(this.funcList[data.func]) || data.func
    },
    // s7300匹配范围格式化
    acceptRangeFormatter (data) {
      return this.$t(this.acceptRangeList[data.accept_range])
    },
    rowsTooltip (data, html) { // 寄存器区间:DB区,地址范围:1.3~2.4,DB 值:54,值类型:NULL,值范围78~87;
      if (this.showOther.includes(data.func) && data.rows) {
        var str = ''
        data.rows.forEach(val => {
          str += this.$t('寄存器区间:') + this.intervalList[val.register_interval] + this.$t(',地址范围:')
          if (this.showPositionList.includes(data.register_interval)) {
            str += val.register_address_start + '.' + val.register_address_start_position + '-' + val.register_address_end + '.' + val.register_address_end_position
          } else {
            str += val.register_address_start + '-' + val.register_address_end
          }
          if (val.db_num !== null) {
            str += this.$t(',DB值:') + val.db_num
          }
          if (data.func !== 4 && data.func !== '0x04') { // 如果是读寄存器就没有寄存器范围
            if (val.register_value_type !== null) {
              str += this.$t(',值类型:') + this.valueTypeList[val.register_value_type]
            }
            if (['3'].includes(val.register_value_type)) {
              str += this.$t(',值类范围:') + this.rangeList[val.register_value_range_select]
            } else {
              str += this.$t(',值类范围:') + val.register_value_range_start + '-' + val.register_value_range_end
            }
          }
          // if (val.register_value_range_start !== null) {
          //   if (val.register_value_type !== '3') {
          //     str += ',值类范围:' + val.register_value_range_start + '-' + val.register_value_range_end
          //   } else {
          //     str += ',值类范围:' + this.rangeList[val.register_value_range_start]
          //   }
          // }
          str += ';'
          if (html) {
            str += '<br/>'
          }
        })
        return str
      }
    },
    // 读寄存器值范围格式化
    readRegisterValueRangeFormatter (row) {
      if (['3'].includes(row.read_register_value_type)) {
        return this.$t(this.rangeList[row.read_register_value_range.split('~')[0]])
      } else {
        return row.read_register_value_range
      }
    },
    // 写寄存器值范围格式化
    writeRegisterFormatter (row) {
      if (this.showPositionList.includes(row.relate_write_register_interval)) {
        return row.write_register_address_range_position ? (row.write_register_address_range + '.' + row.write_register_address_range_position) : row.write_register_address_range
      } else {
        return row.write_register_address_range
      }
    },
    // 读寄存器地址格式化
    ReadRegisterFormatter (row) {
      if (this.showPositionList.includes(row.relate_read_register_interval)) {
        return row.read_register_address_range_position ? (row.read_register_address_range + '.' + row.read_register_address_range_position) : row.read_register_address_range
      } else {
        return row.read_register_address_range
      }
    }
  }
}
</script>
